<template>
  <div ref="myChart" class="line-chart" />
</template>

<script >
import * as echarts from 'echarts'
export default {
  name: 'HalfCircle',
  props: ['percentData'], 
  data() {
    return {
    }
  },
  mounted() {
    this.chartRun()
  },
  methods: {
    chartRun() {
      const myChart = echarts.init(this.$refs.myChart)
      window.addEventListener('resize', myChart.resize)

      var getxb1 = this.percentData.t_time // 教师时间
      var getxb2 = this.percentData.s_time // 学生时间
      var xbzb = [this.percentData.t_percent, this.percentData.s_percent]// 百分比
      // var total = getxb1 + getxb2

      var rich = {
        name: {
          color: '#a7c7f5',
          fontSize: 13,
          padding: [6, 0],
          align: 'left'
        },
        percent: {
          color: '#d5c119',
          align: 'center',
          fontSize: 13,
          padding: [5, 0]
        },
        hr: {
          borderColor: '#4781be',
          width: '100%',
          borderWidth: 0.5,
          height: 0
        }
      }

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{c}分钟'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            // roseType: "radius",
            labelLine: {
              normal: {
                length: 10,
                length2: 10,
                lineStyle: {
                  color: '#a0cfff'
                }
              }
            },
            label: {
              normal: {
                formatter: params => {
                  return '{name|' + params.name + '}\n{hr|}\n{percent|' + params.value + '分钟}  {percent|' + xbzb[params.dataIndex] + '%} '
                },
                rich: rich,
                distanceToLabelLine: 0,
                padding: [-2, 0, 0, 0]
              }
            },
            data: [
              {
                value: getxb1,
                name: '教师授课时间',
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#4C8DFA'
                    }, {
                      offset: 1,
                      color: '#5CCFFF'
                    }], false)
                  }
                }
              }, {
                value: getxb2,
                name: '学生活动时间',
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#FFD18B'
                    }, {
                      offset: 1,
                      color: '#FDAD59'
                    }], false)
                  }
                }
              }
              // , {
              //   value: total,
              //   name: '',
              //   label: {
              //     show: false
              //   },
              //   labelLine: {
              //     show: false
              //   },
              //   itemStyle: {
              //     normal: {
              //       color: 'transparent',
              //       borderWidth: 0,
              //       shadowBlur: 0,
              //       borderColor: 'transparent',
              //       shadowColor: 'transparent'
              //     }
              //   }
              // }
            ]
          }]

      }

      myChart.setOption(option)
    }
  }
}

</script>
<style scoped>
.line-chart{
 width: 100%;
 flex: 1;
 }
</style>
